<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Basic Demos</h2>

<p>Basic demonstrations of how Processing works, from the <a href="http://processing.org/">Processing.org</a> web site. All of the following demos were written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a> unless otherwise stated.</p>

<p><a href="http://processing.org/learning/basics/">Processing.org Basic Demos</a></p>

<div class="ref-col"><p><br /><b>Structure</b><br /><br />	<a href="statementscomments.html">Statements and Comments</a><br />

	<a href="coordinates.html">Coordinates</a><br />
	<a href="widthheight.html">Width and Height</a><br />
	<a href="setupdraw.html">Setup and Draw</a><br />
	<a href="noloop.html">No Loop</a><br />
	<a href="loop.html">Loop</a><br />
	<a href="redraw.html">Redraw</a><br />

	<a href="functions.html">Functions</a><br />
	<a href="recursion.html">Recursion</a><br />
	<a href="recursion2.html">Recursion 2</a><br />
	<a href="creategraphics.html">CreateGraphics</a><br />
<p><br /><b>Form</b><br /><br />	<a href="pointslines.html">Points and Lines</a><br />
	<a href="shapeprimitives.html">Shape Primitives</a><br />

	<a href="simplecurves.html">Simple Curves</a><br />
	<a href="piechart.html">Pie Chart</a><br />
	<a href="vertices.html">Vertices</a> (Note: Canvas can't do all styles of curved vertex.)<br />
	<a href="trianglestrip.html">Triangle Strip</a> (Note: Only normal triangles are drawn.)<br />
	<a href="bezier.html">Bezier</a><br />
	<a href="bezierellipse.html">Bezier Ellipse</a><br />

<p><br /><b>Data</b><br /><br />	<a href="variables.html">Variables</a><br />
	<a href="integersfloats.html">Integers and Floats</a><br />
	<a href="truefalse.html">True/False</a><br />
	<a href="charactersstrings.html">Characters and Strings</a> (Firefox 3)<br />
	<a href="datatypeconversion.html">Datatype Conversion</a><br />
	<a href="variablescope.html">Variable Scope</a><br />

<p><br /><b>Control</b><br /><br />	<a href="iteration.html">Iteration</a><br />
	<a href="embeddediteration.html">Embedded Iteration</a><br />
	<a href="conditionals1.html">Conditionals 1</a><br />
	<a href="conditionals2.html">Conditionals 2</a><br />
	<a href="logicaloperators.html">Logical Operators</a><br />
</div><div class="ref-col"><p><br /><b>Math</b><br /><br />	<a href="incrementdecrement.html">Increment/Decrement</a><br />

	<a href="operatorprecedence.html">Operator Precedence</a><br />
	<a href="modulo.html">Modulo</a><br />
	<a href="distance1d.html">Distance 1D</a><br />
	<a href="distance2d.html">Distance 2D</a><br />
	<a href="sine.html">Sine</a><br />
	<a href="sinecosine.html">Sine and Cosine</a><br />

	<a href="sinewave.html">Sine Wave</a><br />
	<a href="additivewave.html">Additive Wave</a><br />
	<a href="polartocartesian.html">Polar to Cartesian</a><br />
	<a href="arctangent.html">Arctangent</a><br />
	<a href="graphing2dequation.html">Graphing 2D Equation</a><br />
	<a href="random.html">Random</a><br />

	<a href="doublerandom.html">Double Random</a><br />
	<a href="noise1d.html">Noise 1D</a><br />
	<a href="noise2d.html">Noise 2D</a><br />
	<a href="noise3d.html">Noise 3D</a><br />
	<a href="noisewave.html">NoiseWave</a><br />
<p><br /><b>Typography</b><br /><br />	<a href="letters.html">Letters</a> (Firefox 3)<br />

	<a href="words.html">Words</a> (Firefox 3)<br />
<p><br /><b>Image</b><br /><br />	<a href="displaying.html">Displaying</a><br />
	<a href="backgroundimage.html">Background Image</a><br />
	<a href="pointillism.html">Pointillism</a><br />
	<a href="transparency.html">Transparency</a><br />
	<a href="sprite.html">Sprite</a><br />

	<a href="alphamask.html">Alphamask</a> (Note: Canvas can't alpha-blend properly.)<br />
	<a href="createimage.html">CreateImage</a><br />
<p><br /><b>Color</b><br /><br />	<a href="hue.html">Hue</a><br />
	<a href="saturation.html">Saturation</a><br />
	<a href="brightness.html">Brightness</a><br />
	<a href="colorwheel.html">Color Wheel</a><br />

	<a href="reading.html">Reading</a><br />
	<a href="creating.html">Creating</a><br />
	<a href="relativity.html">Relativity</a><br />
	<a href="lineargradient.html">Linear Gradient</a><br />
	<!--<a href="radialgradient.html">Radial Gradient</a><br />
	<a href="wavegradient.html">Wave Gradient</a><br />-->

<p><br /><b>Transform</b><br /><br />	<a href="translate.html">Translate</a><br />
	<a href="scale.html">Scale</a><br />
	<a href="rotate.html">Rotate</a><br />
	<a href="triangleflower.html">Triangle Flower</a><br />
	<a href="arm.html">Arm</a><br />
</div><div class="ref-col"><p><br /><b>Input</b><br /><br />	<a href="mouse1d.html">Mouse 1D</a><br />

	<a href="mouse2d.html">Mouse 2D</a><br />
	<a href="mousepress.html">MousePress</a><br />
	<a href="mousesignals.html">Mouse Signals</a><br />
	<a href="easing.html">Easing</a><br />
	<a href="constrain.html">Constrain</a><br />
	<a href="storinginput.html">Storing Input</a><br />

	<a href="mousefunctions.html">Mouse Functions</a><br />
	<a href="keyboard.html">Keyboard</a><br />
	<a href="keyboardfunctions.html">Keyboard Functions</a><br />
	<a href="milliseconds.html">Milliseconds</a><br />
	<a href="clock.html">Clock</a><br />
<p><br /><b>Arrays</b><br /><br />	<a href="array.html">Array</a><br />

	<a href="array2d.html">Array 2D</a><br />
	<a href="arrayobjects.html">Array Objects</a><br />
<p><br /><b>Objects</b><br /><br />	<a href="objects.html">Objects</a><br />
	<a href="multipleconstructors.html">Multiple Constructors</a><br />
	<a href="compositeobjects.html">Composite Objects</a> (Note: Canvas can't do all styles of curved vertex.)<br/>
	<a href="inheritance.html">Inheritance</a><br />

	<a href="neighborhood.html">Neighborhood</a><br />
<p><br /><b>Web</b><br /><br />	<a href="embeddedlinks.html">Embedded Links</a><br />
	<!--<a href="loadingimages.html">Loading Images</a> (Broken: Loading external images not working.)<br />-->
</div>
</body>
</html>
